<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<script src="../libs/vue.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="root">
			<table border="1">
				<thead>
					<tr>
						<th>中文名</th>
						<th>英文名</th>
						<th>价格</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="item of fruitList" :key="item.id">
						<td>{{item.name}}</td>
						<td>{{item.ename}}</td>
						<td>{{item.price}}</td>
					</tr>
				</tbody>
			</table>
			
				<ul>
					<li v-for="item in object">
						{{item}}
					</li>
				</ul>
				<ol>
					<li v-for="(item,key,index) in object">
						{{key}} : {{item}} :{{index}}
					</li>
				</ol>
				<ul v-for="set in sets">
				  <li v-for="n in even(set)">{{ n }}</li>
				</ul>
			<ul>
				<template v-for="item in fruitList">
					<li>{{item.name}}</li>
					<li class="divider" role="presentation"></li>
				</template>	
				
			</ul>
				
		</div>
		
		<script>
			var vm = new Vue({
				el:'#root',
				data: {
					fruitList:[
						{ id:1, name:'苹果', ename:'apple', price:10.01 },
						{ id:2, name:'香蕉', ename:'banana', price:3.111 },
						{ id:3, name:'橘子', ename:'orange', price:2.3 }
					],
					object: {
						title:'当前vue版本？',
						content:'Vue.js v2.6.11',
						info:'(c) 2014-2019 Evan You'
					},
					sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
				},
				methods:{
					even:function(numbers){
						return numbers.filter((number) =>{
							return number % 2 !== 0;
						});
					}
				}
			});
			
		</script>
	</body>
</html>
